<template>
  <el-card>
    <span class="title">项目授权统计</span>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- <el-tab-pane label="今天" name="today"></el-tab-pane> -->
      <el-tab-pane label="本周" name="week"></el-tab-pane>
    </el-tabs>
    <el-select size="mini" v-model="form.projId" placeholder="请选择项目" @change="selectChang">
      <el-option
        v-for="item in optionsProj"
        :key="item.projId"
        :label="item.projName"
        :value="item.projId">
      </el-option>
    </el-select>
    <div id="lineProd" ref="lineProd"></div>
  </el-card>
</template>

<script>
import echarts from 'echarts'
import LoginSrv from "../api/login.service";

export default {
  name: 'home',
  data () {
    return {
      activeName: 'week',
      optionsProj: [],
      form: {
        nowData: this.getTime(),
        projId: ''
      },
      projArr: []
    }
  },
  created() {
    if (PUZZLE_CONFIG.pageHome && PUZZLE_CONFIG.pageHome != "")
      this.$router.replace({ name: PUZZLE_CONFIG.pageHome });
      this.getProjList()
  },
  mounted () {
  },
  methods: {
    getTime () {
      let date = new Date()
      let seperator1 = '-'
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let strDate = date.getDate()
      if (month>=1&&month<=9) {
        month = '0' + month
      }
      if (strDate>=0&&strDate<=9) {
        strDate = '0' + strDate
      }
      let currentdate = year+seperator1+month+seperator1+strDate
      return currentdate
    },
    getProjList() {
      let _this = this;
      LoginSrv.getProjsList().then(res => {
        if (res.code == 10200) {
          _this.optionsProj = res.data;
          _this.form.projId = res.data[0].projId
          _this.initData()
        }
      });
    },
    initData () {
      LoginSrv.getProjAuthCount(this.form).then(res => {
        if (res.code == 10200) {
          this.projArr = res.data
          let maxA = Math.max(...res.data) + 1
          console.log(maxA);
          this.projArr.push(maxA)
          this.initLineProj()
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    initLineProj() {
      let line = this.$echarts.init(this.$refs.lineProd);
      let lineOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: '#C1E5F8',
              width: 1,
              type: 'dashed'
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap:false,
          name: "日",
          data: ['周一','周二','周三','周四','周五','周六','周日'],
          axisLabel: {
            textStyle: {
              // color: '#333',
              fontSize: 12
            }
          },
          // axisLine: {
          //   lineStyle: {
          //     color: '#CACDD2'
          //   }
          // }
        },
        yAxis: {
          name: "授权数/个",
          type: "value",
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          },
          // axisLine: { // 坐标轴的颜色
          //   lineStyle: {
          //     color: '#CACDD2'
          //   },
          // },
          axisLabel: { // 坐标轴字体颜色大小
            textStyle: {
              // color: '#333',
              fontSize: 12
            }
          },
        },
        series: [
          {
            name: "授权个数",
            type: "line",
            smooth: true,
            symbol: 'circle',
            symbolSize: 6,
            color: ['#22A5E2'],
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default',
                  color: new echarts.graphic.LinearGradient(
                    0,0,0,1,
                    [
                      {
                        offset: 0,
                        color: '#22A5E2'
                      },
                      {
                        offset: 0.8,
                        color: '#87CCF0'
                      },
                      {
                        offset: 1,
                        color: '#F4F7FF'
                      }
                    ]
                  )
                },
                lineStyle: {
                  color: '#22A5E2' // 线颜色
                },
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#22A5E2'
                  }
                }
              }
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
              lineStyle: {
                color: '#22A5E2' // 线颜色
              },
            },
            areaStyle: {},
            data: this.projArr,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
          }
        ]
      };
      line.setOption(lineOption);
    },
    selectChang () {
      console.log(this.form);
      this.initData()
    }
  }
};
</script>

<style lang="less" scoped>
.home-bg {
  width: 340px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.home-container {
  width: 100%;
  height: 100%;
  background: pink;
  .content-echart {
    display: flex;
    .item {
      width: 50%;
      height: 420px;
      .title {
        position: absolute;
        font-size: 16px;
        font-weight: bold;
        color: #333;
      }
      .el-card {
        width: 100%;
        height: 100%;
      }
      #lineProd {
        width: 100%;
        height: 100%;
      }
    }
    .top-left {
      margin-right: 16px;
    }
    .lineProd {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
<style>
.home-container .content-echart .item .el-card__body {
  width: 100%;
  height: 100%;
  position: relative;
}
.home-container .content-echart .el-tabs__item {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
}
.home-container .content-echart .el-tabs__header {
  margin: 0;
}
.home-container .content-echart .el-tabs__nav {
  float: right;
}
.home-container .content-echart .el-select {
  position: absolute;
  top: 60px;
  right: 20px;
  width: 160px;
  z-index: 999;
}
</style>
